<template>
  <div class="warehouse-shipment-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <a-tab-pane key="1" :tab="`处理中(${pageStat['1']})`"></a-tab-pane>
        <a-tab-pane key="2" :tab="`已完成(${pageStat['2']})`"></a-tab-pane>
      </a-tabs>
      <super-table
        :height="tableHeight"
        ref="tableRef"
        :activeKey="activeKey"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool>
          <!-- <a-button type="primary" @click="importBoxTransferNoHandle" v-if="activeKey === '1'">更改问题类型</a-button> -->
        </template>
        <template #workOrderNo="{ row }">
          <a-button type="link" @click="detailHandle(row)">{{ row.workOrderNo }}</a-button>
        </template>
        <template #shipmentLimit="{ row }">
          {{ row.shipmentLimit === 0 ? "否" : "是" }}
        </template>

        <template #questionScope="{ row }">
          {{ getLabelByDict("QUESTION_SCOPE", row.questionScope) }}
        </template>

        <template #questionType="{ row }">
          <span v-if="row.questionScope === 'PRE_PORT_SCOPE'" :title="getLabelByDict('PRE_PORT_SCOPE', row.questionType)"> {{ getLabelByDict("PRE_PORT_SCOPE", row.questionType) }}</span>
          <span v-if="row.questionScope === 'AFTER_PORT_SCOPE'" :title="getLabelByDict('AFTER_PORT_SCOPE', row.questionType)"> {{ getLabelByDict("AFTER_PORT_SCOPE", row.questionType) }}</span>
        </template>

        <template #action="{ row }">
          <a-button type="link" @click="detailHandle(row)">查看进度</a-button>
        </template>
      </super-table>
    </div>

    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" @close="getData" :width="drawerOpts.width" placement="right">
      <component
        v-model:visible="drawerOpts.visible"
        :is="drawerOpts.component"
        :type="drawerOpts.type"
        :activeKey="activeKey"
        :pass-data="drawerOpts.passData"
        @submit="drawerSubmitHandle"
      ></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal
      v-model:visible="dialogOpts.visible"
      :maskClosable="false"
      :keyboard="false"
      :closable="['DataStatistics'].includes(dialogOpts.component)"
      :footer="null"
      :title="dialogOpts.title"
      :width="dialogOpts.width"
    >
      <component
        v-model:visible="dialogOpts.visible"
        :is="dialogOpts.component"
        :type="dialogOpts.type"
        :pass-data="dialogOpts.passData"
        @submit="dialogSubmitHandle"
        :active-key="activeKey"
      ></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import Detail from "./components/details/index.vue";
import ModifyWorkOrderStatus from "./components/modifyWorkOrderStatus/index.vue";
import CommonHook from "@/hook/commonHook";
export default {
  name: "BusinessWorkOrder",
  components: { Detail, ModifyWorkOrderStatus }
};
</script>
<script setup lang="ts">
import TableHeightHook from "@/hook/tableHeightHook";
import { searchItemList } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import ModalHook from "@/hook/modalHook";
const { tableHeight, loading } = TableHeightHook(110);
const { getLabelByDict } = CommonHook();
const { searchForm, activeKey, pageStat, tableData, tableRef, drawerOpts, tableColumn, dialogOpts } = InitHook();
const {
  searchHandle,
  changeTabHandle,
  getData,
  detailHandle
  //  importBoxTransferNoHandle
} = OperationHook({
  searchForm,
  tableData,
  loading,
  activeKey,
  pageStat,
  tableRef,
  drawerOpts,
  dialogOpts
});

const { drawerSubmitHandle, dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => searchHandle()
});
searchHandle();
</script>
<style lang="stylus" scoped>
.warehouse-shipment-page{

}
</style>
